<template>
  <div style="background-color: #F8F8F8;">
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item disabled>
        <div style="margin-left: 200px"></div>
      </el-menu-item>
      <el-menu-item index="0">
        <el-avatar :size="60" :src="home.logo"></el-avatar><span style="font-weight:bold;font-size:25px;">&nbsp;今日BUG</span>
      </el-menu-item>
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-menu-item index="3">消息中心</el-menu-item>
      <el-menu-item index="user">订单管理</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item disabled>
        <div style="margin-left: 300px"></div>
      </el-menu-item>
      <el-menu-item>
        <el-input
          placeholder="请输入搜索内容"
          @keyup.enter.native.stop="enter"
          v-model="name"
          clearable
        >
        </el-input>
      </el-menu-item>
      <el-menu-item>
        <i class="el-icon-message" style="color: #ffffff"></i>
      </el-menu-item>
      <el-menu-item>
        <i class="el-icon-plus" style="color: #ffffff"></i>
      </el-menu-item>
      <el-menu-item>
        <el-avatar :size="40" :src="userInfo.path"></el-avatar>
      </el-menu-item>
    </el-menu>

    <!-- body内容体 -->
    <div id="body-content">
      <!-- body中左侧部分内容 -->
        <div id="body-content-left" class="body-content-child">
            <ul>
            <li v-for="row in tableData" :key="row" class="infinite-list-item">{{ row.name}}</li>
          </ul>
        </div>
        <!-- body中中间部分内容 -->
        <div id="body-content-contre" class="body-content-child">
           <ul>
            <li v-for="row in tableData" :key="row" class="infinite-list-item">{{ row.name}}</li>
          </ul>
        </div>

        <!-- body中右侧部分 -->
        <div id="body-content-right" class="body-content-child">
          <ul>
            <li v-for="row in tableData" :key="row" class="infinite-list-item">{{ row.name}}</li>
          </ul>
        </div>
    </div>
  </div>
</template>

<script>
import devApi from "../../../config/dev.env";
export default {
  data() {
    return {
      name: "",
      param: {
        page: "1",
        size: "200"
      },
      home: {
        logo: "../../static/todayBUG.png",
      },
      userInfo: {
        path:
          "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606123883438&di=29a9c03805c88ab287762830836c5fb6&imgtype=0&src=http%3A%2F%2Fa3.att.hudong.com%2F11%2F91%2F01300001009299133489919888301.jpg",
      },
      tableData: [],
      count: 100
    };
  },
  created() {
    this.getList();
  },
  // watch() {

  // },
  methods: {
    enter() {
        alert(this.name);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    getList() {
      const params = {};
      params.page = this.param.page;
      params.size = this.param.size;
      this.$http.get(devApi.list,{params}).then((res) => {
          console.log(res);
          this.tableData = res.data.data.list;
      });
    }
  },
};
</script>
<style>
#body-content {
  width: 80%;
  margin: 0 auto;
}
#body-content-left {
    width: 23%;
}
#body-content-contre {
    width: 50%;
}
#body-content-right {
    width: 23%;
}
.body-content-child {
    /* height: 500px;
    background-color: green; */
    border: red 1px solid;
    text-align: center;
    float: left;
    margin: 0 0 0 1%;
}
</style>